<template>
  <div class="section clearfix">
    <el-row>
      <el-col :span="6" style="margin-right: 3%;overflow :hidden">
        <div class="custom-tree-container">
          <div class="block">
            <h2 class="title" @click="addOrgan">添加部门</h2>
            <el-tree
              :data="data"
              :props="defaultProps"
              @node-click="handleNodeClick"
              class="el-tree"
            ></el-tree>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div>
          <div class="haeder">
            <p>功能区：</p>
            <p @click="dialogVisible = true">公司管理</p>
          </div>
          <el-form
            label-width="80px"
            :model="formLabelAlign"
            ref="formLabelAlign"
            class="form"
            v-if="showForm"
            :rules="rules"
          >
            <el-form-item label="所属公司" prop="companyId">
              <el-select
                v-model="formLabelAlign.companyId"
                placeholder="请选择"
                @change="showDept"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.companyName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上级部门" prop="pid">
              <treeselect
                :options="deptData"
                :clearable="false"
                v-model="formLabelAlign.pid"
                :normalizer="normalizer"
                :placeholder="placeholder"
              />
            </el-form-item>
            <el-form-item label="部门名称" prop="departmentName">
              <el-input v-model="formLabelAlign.departmentName"></el-input>
            </el-form-item>
            <el-form-item label="排序值">
              <el-input-number
                v-model="formLabelAlign.sort"
              
                :min="1"
                label="描述文字"
              ></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button v-no-more-click>取消</el-button>
              <el-button type="primary" @click="deptAdd" v-no-more-click
                >提交</el-button
              >
            </el-form-item>
            <el-form-item>
              <p>
                如此部门下已无子部门，您可以
                <u style="color: rgb(28,158,254);" @click="delfun"
                  >删除此部门</u
                >
              </p>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!--公司对话框-->
    <el-dialog
      title="公司管理"
      :visible.sync="dialogVisible"
      width="45%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <Organza
        :dialogVisible="dialogVisible"
        v-on:dialogVisible="closeDialog($event)"
        @gitlist="gitlist"
      ></Organza>
    </el-dialog>
    <!-- 删除提示框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialog"
      width="20%"
      :modal-append-to-body="false"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <span>是否删除名字为{{ deptlabel }}的部门</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false" v-no-more-click>取 消</el-button>
        <el-button type="primary" @click="deldept" v-no-more-click
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  orginlistTree,
  pagelist,
  departAdd,
  deptAdd,
  deldept,
  editdept,
  getDepartment,
  getDepartList
} from "../../../src/assets/js/api";
import Organza from "../../components/system/Organza";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "Organization",
  components: {
    Organza,
    Treeselect
  },
  data() {
    return {
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children == null) {
          delete node.children;
        }
      },
      placeholder: "请选择上级部门",
      value: null,
      data: [],
      // 部门数据
      deptData: [],
      showForm: false,
      defaultProps: {
        children: "children",
        label: "label"
      },
      formLabelAlign: {
        departmentName: "",
        companyId: "",
        sort: "1",
        pid: null
      },
      otherId: undefined,
      options: [],
      dialogVisible: false,
      dialog: false,
      form: "",
      delId: "",
      deptlabel: "",
      pid: "",
      // 表单校验
      rules: {
        companyId: [
          { required: true, message: "请选择公司", trigger: "change" }
        ],
        // pid: [{ required: true, message: "请选择部门", trigger: "change" }],
        departmentName: [
          { required: true, message: "请输入部门名称", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.gitlist();
  },
  methods: {
    //获取公司树形结构
    gitlist() {
      orginlistTree().then(res => {
        this.data = res.data;
      });
    },
    closeDialog(msg) {
      this.dialogVisible = msg;
      this.gitlist();
    },
    handleNodeClick(data) {
      this.showForm = true;
      this.addOrgan();
      this.otherId = data.otherId;
      if (data.otherId === undefined || data.otherId == null) {
        // 点击公司
        this.formLabelAlign.companyId = data.id;
        //通过公司id查询部门
        departAdd(data.id).then(res => {
          let arr = [
            { pid: null, id: 0, children: null, label: "此作为一级部门" }
          ];
          this.deptData = arr.concat(res.data);
        });
      } else {
        // 点击部门
        getDepartList(data.id).then(res => {
          if (res.data.pid == null) {
            this.placeholder = "此作为一级部门";
            this.deptData = [];
          } else {
            this.formLabelAlign.pid = res.data.pid;
            departAdd(res.data.firmId).then(res => {
              this.deptData = res.data;
            });
          }
        });
        this.delId = data.id;
        this.deptlabel = data.label;
        this.formLabelAlign.companyId = data.otherId;
        this.pid = data.pid;
        const id = data.id;
        const firmId = data.otherId;
        const token = localStorage.getItem("token");
        this.axios
          .get("/sys/department/findOneByFirmId", {
            //参数列表
            params: { id: id, firmId: firmId },
            //请求头配置
            headers: { token: token }
          })
          .then(res => {
            //this.formLabelAlign.pid = res.data.data.id;
            this.formLabelAlign.departmentName = res.data.data.departmentName;
            this.formLabelAlign.sort = res.data.data.sort;
          });
      }
    },
    //添加部门按钮
    addOrgan() {
      //清空form表单
      this.formLabelAlign.departmentName = "";
      this.formLabelAlign.companyId = "";
      this.formLabelAlign.sort = 1;
      this.formLabelAlign.pid = null;
      this.showForm = true;
      //获取所有公司列表
      pagelist().then(res => {
        this.options = res.data;
      });
    },

    // 添加部门
    deptAdd() {
      this.$refs.formLabelAlign.validate(valid => {
        if (!valid) {
          return false;
        }
        // 添加
        if (this.otherId === undefined || this.otherId == null) {
          deptAdd(this.formLabelAlign).then(res => {
            if (res.code === 200) {
              this.$message({
                message: res.message,
                type: "success"
              });
              this.gitlist();
              this.$refs.formLabelAlign.resetFields();
            } else {
              this.$message({
                message: res.message,
                type: "error"
              });
            }
          });
        } else {
          // 编辑
          let id = this.delId;
          let departmentName = this.formLabelAlign.departmentName;
          let companyId = this.formLabelAlign.companyId;
          let sort = this.formLabelAlign.sort;
          let pid = this.formLabelAlign.pid;
          let aditForm = { id, departmentName, companyId, sort, pid };
          editdept(aditForm).then(res => {
            if (res.code === 200) {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.gitlist();
            } else {
              this.$message({
                message: "修改失败",
                type: "error"
              });
            }
          });
        }
      });
    },
    showDept(compentId) {
      getDepartment(compentId).then(res => {
        let arr = [
          { pid: null, id: 0, children: null, label: "此作为一级部门" }
        ];
        this.deptData = arr.concat(res.data);
        this.formLabelAlign.pid = null;
      });
    },
    // 删除
    delfun() {
      if (this.otherId == undefined || this.otherId == null) {
        this.$message({
          message: "请选择需要删除的部门",
          type: "warning"
        });
      } else {
        this.dialog = true;
      }
    },
    deldept() {
      if (this.otherId === undefined) {
        this.$message({
          message: "请选择需要删除的部门",
          type: "warning"
        });
      } else {
        deldept(this.delId).then(res => {
          if (res.code === 200) {
            this.dialog = false;
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.gitlist();
          } else {
            this.dialog = false;
            this.$message({
              message: "删除失败",
              type: "success"
            });
            this.gitlist();
          }
        });
      }
    }
  }
};
</script>

<style scoped type="less">
.block {
  height: 400px;
  overflow: auto;
}
.title {
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  border-bottom: 1px solid #ccc;
}
.el-col-6 {
  box-shadow: 0 0 10px rgb(193, 193, 193);
}
.haeder {
  background-color: rgb(241, 243, 244);
  width: 100%;
  height: 60px;
  overflow: hidden;
  padding-left: 20px;
  line-height: 30px;
}
.haeder p {
  float: left;
  height: 30px;
  line-height: 30px;
  margin-top: 15px;
}
.haeder :nth-child(2) {
  background-color: rgb(22, 155, 213);
  width: 80px;
  border-radius: 5px;
  color: white;
}
.haeder :nth-child(2) {
  cursor: pointer;
}
.form {
  box-shadow: 0px 0px 10px rgb(193, 193, 193);
  width: 100%;
  padding: 50px 0 50px 20px;
  margin-top: 30px;
}
.form ::v-deep .el-form-item__content {
  width: 400px;
}
.form ::v-deep .el-select > .el-input {
  width: 400px;
}
.form ::v-deep .el-input-number {
  width: 400px;
}
u:hover {
  cursor: pointer;
}
.el-dialog__body {
  padding: 0 15px 15px 15px;
}
::v-deep.el-dialog__footer {
  width: 67%;
  position: absolute;
  right: 0;
  bottom: 30px;
  text-align: center;
}
.el-tree {
  height: 360px;
  box-shadow: none;
}
</style>
